<template>
  <div class="nav-bar">
    <div class="wrap left-wrap">
      <slot name="left">
        <div @click="handleBack" class="back-btn">
          <van-icon name="arrow-left" size="20px" color="#1677FF" />
          <!-- <slot name="right">返回</slot> -->
        </div>
      </slot>
    </div>
    <div class="wrap center-wrap">
      泰州市高层次人才梧桐库
      <!-- <slot name="center">{{ title }}</slot> -->
    </div>
    <!-- <div class="wrap right-wrap">
      <slot name="right">
        <div @click="handleBackHome" class="back-home-btn">
          <van-icon name="wap-home-o" />
        </div>
      </slot>
    </div> -->
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const props = defineProps({
  title: { type: String, default: '' }
})

const router = useRouter();

//  回退
const handleBack = () => {
  router.back(-1);
}

//  返回首页
const handleBackHome = () => {
  router.push({ path: '/Home' })
}

</script>

<style lang="scss" scoped>
.nav-bar {
  position: relative;
  height: 4.6rem;
  text-align: center;
  background: #fff;

  .wrap {
    height: 100%;
    line-height: 4.6rem;
    box-sizing: border-box;

    &.left-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 4rem;
      z-index: 10;
      font-size: 1.3rem;
      font-weight: 400;
      color: #005820;
    }

    &.center-wrap {
      width: 100%;
      font-size: 1.6rem;
      font-weight: 400;
      text-align: center;
    }

    &.right-wrap {
      position: absolute;
      top: 0;
      right: 0;
      width: 6rem;
      font-size: 1.6rem;
      z-index: 10;
    }
  }
}
</style>
